<!-- 添加修改地址 -->
<template>
  <view class="address-wrap">
    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
      <view class="address-box">
        <!-- 地址表单 -->
        <u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="收货人:" prop="name">
          <u-input placeholder="请填写收货人姓名" v-model="model.name" type="text"></u-input>
        </u-form-item>
        <u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="手机号:" prop="phone">
          <u-input placeholder="请输入收货人手机号" v-model="model.phone" type="number"></u-input>
        </u-form-item>
        <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="所在地区:" prop="city">
          <u-input type="select" v-model="model.city" :select-open="showSelect" placeholder="请选择地区"
            @click="showSelect = true"></u-input>
        </u-form-item>
        <u-form-item :labelStyle="labelStyle" label-position="left" label-width="150" label="详细地址:" prop="address">
          <u-input border type="textarea" v-model="model.address" placeholder="如道路、门牌号、小区、楼栋号、单元室等" />
        </u-form-item>
      </view>

      <!-- 设置默认 -->
      <view class="default-box u-flex u-row-between">
        <text class="title">设为默认地址</text>
        <u-switch v-model="model.is_default" activeColor="#FA6E3F" size="40"></u-switch>
      </view>

      <!-- 功能按钮 -->
      <view class="foot_box u-p-30 u-m-t-50 u-flex u-row-around">
        <button v-show="addressId" class=" u-m-20 u-reset-button delete-btn u-flex-1"
          @tap="deleteAddress">删除收货地址</button>
        <button class=" u-m-20 u-reset-button save-btn u-flex-1" @tap="submit">保存收货地址</button>
      </view>
    </u-form>
    
    <!-- 省市区选择器 -->
    <u-picker mode="region" v-model="showSelect" @confirm="regionConfirm"></u-picker>
    <u-modal v-model="show" content="-请检查信息是否一致-" @confirm="add()" confirm-text="确认提交" :show-cancel-button="true" cancel-text="返回更改"></u-modal>
    <!-- <u-select mode="mutil-column-auto" safe-area-inset-bottom :list="addressAreaList" v-model="showSelect" @confirm="regionConfirm"></u-select> -->
  </view>
</template>

<script>
  import {
    MAP_KEY
  } from '@/env.js';
  import Auth from '@/shopro/permission/index.js';
  export default {
    components: {},
    data() {
      return {
        show:false,
        showSelect: false, //省市区
        addressAreaList: [],
        addressId: 0, //收货地址ID
        labelStyle: {
          'font-size': '28rpx',
          'font-weight': '600',
          color: '#595959'
        },
        model: {
          id: 0,
          name: '',
          phone: '',
          city: '',
          address: '',
          is_default: false,
          latitude: '',
          longitude: ''
        },
        rules: {
          phone: [{
              required: true,
              message: '请输入收货人手机号',
              trigger: ['change', 'blur']
            },
            {
              validator: (rule, value, callback) => {
                return this.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: ['change', 'blur']
            }
          ],
          name: [{
            required: true,
            message: '请填写收货人姓名',
            trigger: ['change', 'blur']
          }],
          city: [{
            required: true,
            message: '请选择地区',
            trigger: ['change', 'blur']
          }],
          address: [{
            required: true,
            message: '请输入详细地址',
            trigger: ['change', 'blur']
          }]
        },
        errorType: ['message'],
        chooseAddress: '点击定位当前地点', //定位地址
        type: 1
      };
    },
    computed: {},
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    onLoad(options) {
      // this.getArea();
      this.type = options.type ? options.type : 1;
      this.addressId = this.$Route.query.id ? this.$Route.query.id : 0;
      this.$Route.query.address ? this.model = JSON.parse(this.$Route.query.address) : console.log();
      if (this.model.is_default == 1) {
        this.model.is_default = true;
      } else {
        this.model.is_default = false;
      }
      console.log(this.model, '地址')
      console.log(this.addressId, 'id')
      uni.setNavigationBarTitle({
        title: this.addressId ? '编辑收货地址' : '添加收货地址'
      });
      // this.addressId && this.getAddressInfo();
      // 微信导入
      // this.$Route.query.addressData && this.wxAddressInit();
    },
    methods: {
      // 获取省市区
      getArea() {
        this.$http('address.area').then(res => {
          if (res.code === 1) {
            let {
              provinceData,
              cityData,
              areaData
            } = res.data;
            provinceData.forEach((item, index) => {
              this.addressAreaList.push({
                ...item,
                children: []
              });
              this.addressAreaList[index].children.push(...cityData[index]);
              this.addressAreaList[index].children.forEach((item1, index1) => {
                item1['children'] = [];
                item1.children.push(...areaData[index][index1]);
              });
            });
          }
        });
      },
      // 微信导入数据格式
      wxAddressInit() {
        let wxAddress = this.$Route.query.addressData; //微信导入
        this.model.id = 0;
        this.model.name = wxAddress.userName;
        this.model.phone = wxAddress.telNumber;
        // #ifdef MP-WEIXIN
        this.model.city = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countyName}`;
        // #endif
        // #ifdef H5
        this.model.city = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countryName}`;
        // #endif
        this.model.address = wxAddress.detailInfo.replace(/%20/g, '');
        this.model.is_default = false;
      },

      // 确认省市区
      regionConfirm(e) {
        console.log(e, '地区')
        this.model.city = `${e.province.label}-${e.city.label}-${e.area.label}`;
        console.log(this.model.city)
      },

      // 获取定位
      async getLocation() {
        let authState = await new Auth('userLocation').check();
        // #ifdef MP || APP-VUE
        authState &&
          uni.getLocation({
            type: 'gcj02',
            success: res => {
              this.model.latitude = res.latitude;
              this.model.longitude = res.longitude;
              this.getLocationInfo();
            },
            fail: err => {
              console.log('%cuni.getLocation,调用失败', 'color:green;background:yellow');
            }
          });
        // #endif

        // #ifdef H5
        uni.getLocation({
          type: 'gcj02',
          success: res => {
            this.model.latitude = res.latitude;
            this.model.longitude = res.longitude;
            this.getLocationInfo();
          },
          fail: err => {
            console.log('%cuni.getLocation,调用失败', 'color:green;background:yellow');
          }
        });
        // #endif
      },

      //逆坐标解析
      async getLocationInfo() {
        this.chooseAddress = '定位中...';
        const [error, res] = await uni.request({
          url: `https://restapi.amap.com/v3/geocode/regeo?location=${this.model.longitude},${this.model.latitude}&key=${MAP_KEY}`
        });
        if (res.data.status === '1') {
          const addressComponent = res.data.regeocode.addressComponent;
          this.chooseAddress = res.data.regeocode.formatted_address;
          this.model.city = `${addressComponent.province}-${addressComponent.city}-${addressComponent.district}`;
          this.model.address = res.data.regeocode.formatted_address.replace(
            `${addressComponent.province}${addressComponent.city}${addressComponent.district}`, '');
        } else {
          console.log('%c逆地址解析失败，请检查是否在env中配置地图key', 'color:green;background:yellow');
        }
      },

      // 提交弹窗
      submit() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            this.show = true;
          } else {
            this.show = false;
          }
          // valid ? this.editAddress() : console.log('验证失败');
        });
      },
      // 确定提交
      add(){
        this.editAddress()
      },
      // 编辑添加地址
      editAddress() {
        let that = this;
        console.log(that.addressId)
        if (that.addressId === 0) {
          let address = that.model;
          that.$http(
            'address.add', {
              id: address.id,
              name: address.name,
              phone: address.phone,
              city: address.city,
              address: address.address,
              is_default: address.is_default ? '1' : '-1'
            },
            '保存中...'
          ).then(res => {
            if (res.code === 1) {
              that.$Router.back();
            }
          });
        } else {
          let add = that.model;
          that.$http(
            'address.edit', {
              id: that.addressId,
              is_default: add.is_default ? '1' : '-1',
              name: add.name,
              city: add.city,
              phone: add.phone,
              address: add.address
            },
            '保存中...'
          ).then(res => {
            if (res.code === 1) {
              that.jump();
            }
          });
        }

      },
      jump() {
        if (this.type === 1) {
          this.$Router.back();
        } else {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }
      },
      // 地址信息
      getAddressInfo() {
        const that = this;
        this.$http('address.info', {
          id: that.$Route.query.id
        }).then(res => {
          if (res.code === 1) {
            let addressData = res.data;
            that.addressId = addressData.id;
            that.model.city = `${addressData.province_name}-${addressData.city_name}-${addressData.area_name}`;
            that.model.is_default = addressData.is_default === '1' ? true : false;
            that.model.address = addressData.address;
            that.model.phone = addressData.phone;
            that.model.name = addressData.name;
          }
        });
      },

      // 删除收货地址
      deleteAddress() {
        const that = this;
        that.$http(
          'address.del', {
            id: that.addressId
          },
          '删除中...'
        ).then(res => {
          if (res.code === 1) {
            that.$Router.back();
          }
        });
      }
    }
  };
</script>

<style lang="scss">
  // 点击定位
  .location-item {
    font-size: 28rpx;

    font-weight: 500;
    background-color: #fff;
    color: rgba(167, 111, 13, 1);
  }

  // 表单
  .address-box {
    background-color: #fff;
    padding: 0 30rpx;
  }

  .address-item {
    height: 96rpx;
    background: #fff;
    border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
    padding: 0 25rpx;

    .item-title {
      color: #333;
      font-size: 28rpx;
      white-space: nowrap;
    }

    .inp {
      color: #333;
      font-size: 28rpx;
    }
  }

  .area-box {
    min-height: 120rpx;
    padding-bottom: 60rpx;
    background: #fff;
    padding: 30rpx 25rpx;

    .item-title {
      font-size: 28rpx;
      line-height: 28rpx;
      vertical-align: middle;
      white-space: nowrap;
    }

    .area-inp {
      color: #333;
      font-size: 28rpx;
      vertical-align: middle;
      margin-top: 8rpx;
      width: 550rpx;
    }
  }

  .default-box {
    height: 100rpx;
    padding: 0 25rpx;
    background: #fff;
    margin-top: 20rpx;

    .title {
      font-size: 28rpx;
    }

    .switch {
      transform: scale(0.8);
    }
  }

  // 底部按钮
  .foot_box {
    .delete-btn {
      line-height: 70rpx;
      background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
      box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
      font-size: 28rpx;

      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      border-radius: 35rpx;
      padding: 0;
      margin-right: 20rpx;
    }

    .save-btn {
      line-height: 70rpx;
      background: linear-gradient(90deg, #FA6E3F, #FEAB55);
      border: 1rpx solid rgba(238, 238, 238, 1);
      border-radius: 40rpx;
      color: rgba(#fff, 0.9);
    }
  }
</style>
